<%@ taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript">
  var grid = jQuery("#listProductCategory");
  jQuery("#listProductCategory")
      .jqGrid(
          {
            url : '${pageContext.request.contextPath}/inventory/productCategory/getProductCategories.action',
            datatype : "json",
            colNames : ['ID','version',
                '<s:property value="getText(\'field.product.category.name\')" />',
                '<s:property value="getText(\'field.description\')" />'],
            colModel : [{
              name : 'id',
              index : 'id',
              editable : false,
              hidden : true,
              editrules : {
                edithidden : false
              },
              width : 10
            },{
              name : 'version',
              index : 'version',
              editable : true,
              hidden : true,
              width : 2
            },{
              name : 'name',
              index : 'name',
              editable : true,
              editrules : {
                required : true,
                edithidden : false,
              },
              width : 150
            },{
              name : 'description',
              index : 'description',
              width : 300,
              editable : true,
              sortable : false
            }],
            jsonReader : {
              root : "rows",
              page : "page",
              total : "total",
              records : "records",
              repeatitems : false,
              id : "id",
              cell : "",
              userdata : ""
            },
            rowNum : 10,
            rowList : [10,20,30],
            pager : '#pagingProductCategory',
            sortname : 'name',
            viewrecords : true,
            sortorder : "asc",
            multiselect : false,
            autowidth : true,
            height : 325,
            caption : "<s:property value='getText(\"title.list.product.category\")' />"
          }).navGrid('#pagingProductCategory',{
        edit : true,
        add : true,
        del : false,
        view : true,
        search : false,
        addfunc : function() {
          $('#editProductCategory').load('inventory/productCategory/addProductCategory.action');
        },
        editfunc : function(id) {
          $('#editProductCategory').load('inventory/productCategory/editProductCategory.action',{
            'productCategory.id' : id
          });
        },
        viewfunc : function(id) {
          $('#editProductCategory').load('inventory/productCategory/viewProductCategory.action',{
            'productCategory.id' : id
          });
        }
      });
</script>
<div style="width: 800px;">
  <table id="listProductCategory"></table>
  <div id="pagingProductCategory"></div>
  <div id="editProductCategory"></div>
</div>